<!DOCTYPE html>
<html lang="es">
  <head>
    <meta charset="utf-8">
    <meta content="App Inventor for Android" name="description">
    <meta content="Android, Blocks App Inventor, Mobile, Phone, IDE" name="keywords">
    <title>
      PicCall - App Inventor para Android
    </title>
    <link href="../../../static/images/appinventor-16.png" rel="SHORTCUT ICON" type="image/ico">
    <link href="../../../static/images/appinventor-16.png" rel="icon" type="image/png">
    <link href="../../../static/css/appinventor.css" rel="stylesheet" type="text/css">
<!-- ADD Google Analytics here -->
<!-- END Google Analytics here -->
    <style type="text/css">
img.c3 {border-width:0}
    img.c2 {padding: 10px}
    div.c1 {clear:both;}
    </style>
  </head>
  <body>
    <div id="aiac">
      <div class="main-container">
        <div class="header">
          <div class="header-title">
            <a href="../../../about/index.html"><img alt="" src="../../../static/images/appinventor_logo.gif"></a>
          </div>
            <div class="header-search">
<!-- ADD Google Custom Search -->
<!-- END Google Custom Search -->
              <div class="header-search-query">
              </div>
              <div class="header-search-button">
              </div>
            </div>
          <div class="header-login">
            <div class="header-login-greeting">
              Aprende acerca de App Inventor
            </div>
          </div>
        </div>
        <div class="customhr customhr-green"></div>
<!-- ADD Google Search Results -->
<div id="cse" style="width:100%;height:0;"></div>
<!-- END Google Search Results -->
        <div id="navigation">
          <div id="navigation-links">
            <div class="navigation-link-option" id="navigation-link-home">
              <a href="../../../about/index.html">Acerca de</a>
            </div>
            <div class="navigation-link-option navigation-link-active" id="navigation-link-learn">
              <a href="../../../learn/index.html">Aprende</a>
            </div>
            <div class="navigation-link-option" id="navigation-link-forum">
              <a href="../../../forum/index.html">Foro</a>
            </div>
            <div class="navigation-link-option" id="navigation-link-myappinventor">
              <a href="">Mis Proyectos</a><div>(próximamente)</div>
            </div>
          </div>
          <div id="navigation-breadcrumb">
            <a href="../../../learn/index.html">Aprende</a> &gt; <a href="../../../learn/tutorials/index.html">Tutoriales</a> &gt; PicCall &gt;
          </div>
          <div class="c1"></div>
        </div>
        <div class="customhr customhr-gray"></div>
        <div class="content">
          <div class="content-body">
            <div class="learn-page">
              <h1>
                PicCall
              </h1><img align="right" alt="" class="c2" src="PicCallAssets/PicCallEmulator.png" width="200">
              <p>
                <em>PicCall</em> te muestra como usar App Inventor para hacer aplicaciones para utilizar funciones reales del teléfono, como llamar a los amigos.
              </p>Para este tutorial se supone que ya has completado el proceso de configuración <a href="../../../learn/setup/index.html">Set Up</a>.
              <h2>
                Antes de empezar
              </h2>
              <p>
                Para ejecutar <em>PicCall</em>, tu teléfono debe estar configurado y activado para realizar llamadas de teléfono. Si no es así, puedes todavía construir <em>PicCall</em> para practicar, pero el teléfono no podrá realizar llamadas.
              </p>
              <blockquote class="notice">
                Atención: PicCall no funciona en todos los teléfonos Android en la implementación actual de App Inventor: tendrás un aviso de error en algunos teléfonos cuando se trate de elegir un número de teléfono. Además, no podrás ver todos tus contactos - sólo aquellos creados a partir de Gmail. Estas limitaciones se eliminarán en el futuro.
              </blockquote>En este tutorial, a diferencia de en <em>HelloPurr</em>, se le dan nombres a los componentes, en vez de utilizar los nombres predeterminados que App Inventor ofrece (como "Button1"). El uso de nombres significativos es una buena práctica de programación: te ayuda a mantener los programas ordenados en tu cabeza, y ayuda a otros a entender tus programas.
              <p>
                Tu teléfono debe contener también algunos contactos con fotos. Puedes utilizar la aplicación Contactos para guardar las imágenes de tus contactos. También puedes hacer clic en Contactos en tu cuenta de Gmail en tu ordenador y añadir fotos allí.
              </p>Asegúrate de que tu ordenador y el teléfono se han configurado para utilizar App Inventor, y navega hasta el sitio web de App Inventor en <a href="http://appinventor.googlelabs.com">appinventor.googlelabs.com</a>. Inicia un nuevo proyecto en la ventana del <em>Designer</em> (diseñador). Nómbralo <em>PicCall</em>  y cambia el <span class="ButtonText">Title</span> (título) de la pantalla a <em>PicCall</em>. Abre el Editor de bloques, haz clic en <span class="ButtonText">Connect to Phone</span>, y comprueba que el teléfono ha iniciado la aplicación App Inventor.<br clear="all">
              <h2>
                Primeros pasos
              </h2>
              <p>
                Empieza igual que en <em>HelloPurr</em> colocando un botón en la pantalla. Haz que el botón tenga 150 píxeles de ancho y 150 píxeles de alto. Ajusta la propiedad <span class="ButtonText">Image</span> del botón a una imagen. Puedes usar la imagen del gatito si la tienes a mano — vas a cambiar esta imagen pronto. Ajusta la propiedad <span class="ButtonText">Text</span> del botón a "Press to Call", aunque también cambiarás esto pronto.
              </p>Cambia el nombre del componente <span class="ButtonText">Button</span> a <span class="ButtonText">TopButton</span> (botón arriba)(Crearás un <span class="ButtonText">BottomButton</span> (botón abajo) mas adelante en el tutorial.) Para cambiar el <span class="ButtonText">nombre</span>, de un componente, haz clic en el botón <em>Rename</em> en el panel componentes e introduce el nuevo nombre.
              <blockquote class="notice">
                En este tutorial, a diferencia de en <em>HelloPurr</em>, se le dan nombres a los componentes, en vez de utilizar los nombres predeterminados que App Inventor ofrece (como "Button1"). El uso de nombres significativos es una buena práctica de programación: te ayuda a mantener los programas ordenados en tu cabeza, y ayuda a otros a entender tus programas. No confundas <span class="ButtonText">name</span> (el nombre) de un componente con <span class="ButtonText">text</span> (el texto) de un componente.  <span class="ButtonText">text</span> es el texto que aparece en la pantalla. <span class="ButtonText">name</span> es el nombre que tu programa usa para hacer referencia al componente. Verás el nombre en la estructura de la lista <span class="ButtonText">Components</span> en el <span class="ButtonText">Designer</span> (diseñador) y en los cajones del editor de bloques.
              </blockquote>
              <h2>
                Hacer llamadas telefónicas
              </h2>
              <p>
                En <em>HelloPurr</em>, hiciste que el teléfono reprodujese un sonido cuando el botón era pulsado. En <em>PicCall</em> casi lo mismo, excepto que en vez de reproducir un sonido, el teléfono hace una llamada.
              </p>El componente de App Inventor <span class="ButtonText">PhoneCall</span> hace llamadas telefónicas. Puedes encontrar <span class="ButtonText">PhoneCall</span> en la sección <em>Social</em> de la <em>Paleta</em>. Abre la sección y arrastra un componente <span class="ButtonText">PhoneCall</span> al visor. Se colocará en la zona Non-visible components. Nómbralo <span class="ButtonText">TopCall</span>. La propiedad <span class="ButtonText">PhoneNumber</span> de <span class="ButtonText">PhoneCall</span> determina el número al que llamar. Ajústala a algun número de teléfono al que te gustaría llamar. Así es como el <span class="ButtonText">Diseñador</span> debe quedar:
              <div class="imagecontainer">
                <img alt="" src="PicCallAssets/PicCallDesigner.png" width="800">
              </div>Ahora cambia al Editor de bloques y arrastra el bloque <span class="Block">when TopButton.Click do</span>. En la ranura <span class="ButtonText">do</span>, coloca un bloque <span class="Ball">call TopCall.MakePhoneCall</span> desde el cajón <span class="ButtonText">TopPhoneCall</span>, de modo que el controlador de eventos quede así:
              <div class="imagecontainer">
                <img alt="" height="102" src="PicCallAssets/PicCallWhenClick.png" width="243">
              </div>Prueba lo que hemos hecho hasta ahora en el teléfono: Pulsa el botón y haz la llamada. Se puede empaquetar esto como una aplicación. Sería una aplicación bastante limitada, siempre llamando al mismo número, aunque algunas personas pueden encontrarla útil.
              <h2>
                Información de contacto del teléfono
              </h2>
              <p>
                Además de hacer llamadas telefónicas, las aplicaciones de App Inventor también pueden obtener información de la lista de contactos del teléfono. Esto se hace con el componente <span class="ButtonText">PhoneNumberPicker</span> (Selector de numero de teléfono).
              </p>Arrastra un componente <span class="ButtonText">PhoneNumberPicker</span> de la sección <em>Social</em> de la <em>Paleta</em>, colócalo bajo <span class="ButtonText">TopButton</span> y cámbiale el nombre a <span class="ButtonText">TopPick</span>. <span class="ButtonText">PhoneNumberPicker</span> es n tipo de botón: cuando lo presionas, trae al frente tu lista de contactos del teléfono y te permite elegir alguno. Cámbai el nombre del <span class="ButtonText">PhoneNumberPicker</span> a <span class="ButtonText">TopPick</span>, y cambia su <span class="ButtonText">Text</span> a "Press to pick a number to call". Pruebalo pulsando el selector en tu teléfono: debes ver aparecer tus contactos, y podrás elegir uno. Nada ocurrirá despues de elegirlo, porque aún no has indiacado a los componentes que hagan nada. Eso será lo siguiente.
              <h2>
                Utilizando el selector
              </h2>
              <p>
                Cambia a la ventana de bloques y abre el cajón <span class="ButtonText">TopPick</span>. Arrastra el bloque <span class="Block">when TopPick.AfterPicking do</span>. Este te permite definir un controlador de eventos que dice lo que se debe hacer después de haber escogido un número de tus contactos.
              </p>Ahora abre el cajón <span class="ButtonText">TopCall</span> y arrastra <span class="Block">set TopCall.PhoneNumber to</span> e introdúcelo en la ranura del bloque <span class="Block">when TopPick.AfterPicking do</span>. Ahora arrastra <span class="Block">TopPick.PhoneNumber</span> del cajón <span class="ButtonText">TopPick</span> a la toma vacía. Así es como el controlador de eventos debe quedar:
              <div class="imagecontainer">
                <img alt="" height="108" src="PicCallAssets/PicCallAfterPicking.png" width="405">
              </div>Pruébalo en el teléfono: Pulsa el botón selector, selecciona un contacto y un número de teléfono. A continuación, pulsa el botón de llamada de teléfono para realizar la llamada. Agrega un comando al controlador de eventos para establecer la propiedad de <span class="ButtonText">TopButton</span> <span class="ButtonText">Text</span> a <span class="ButtonText">TopPick.PhoneNumber</span>:
              <div class="imagecontainer">
                <img alt="" height="144" src="PicCallAssets/PicCallAfterPicking2.png" width="408">
              </div>
              <h2>
                Imágenes
              </h2>
              <p>
                Si tienes una imagen almacenada con tus contactos, puedes hacer que el botón la muestre, junto con el número de teléfono, en lugar de utilizar siempre la imagen del gatito. Para ello, agrega un comando al controlador de eventos, para establecer la propiedad <span class="ButtonText">Image</span> de <span class="ButtonText">TopButton</span> para que sea la propiedad <span class="ButtonText">Picture</span> de <span class="ButtonText">TopPick</span>:
              </p>
              <div class="imagecontainer">
                <img alt="" height="187" src="PicCallAssets/PicCallAfterPicking3.png" width="410">
              </div>
              <blockquote class="notice">
                <span class="ButtonText">PhoneNumberPicker</span> tiene dos propiedades que son fáciles de confundir: <span class="ButtonText">Picture</span> e <span class="ButtonText">Image</span>. <span class="ButtonText">Picture</span> es la imagen asociada con el contacto que se ha seleccionado. <span class="ButtonText">Image</span> es la imagen del componente <span class="ButtonText">PhoneNumberPicker</span> tal y como aparece en el <span class="ButtonText">Designer</span> (diseñador) y en el teléfono.
              </blockquote>
              <h2>
                Mejoras
              </h2>
              <p>
                Aquí hay algunas variaciones que puedes probar:
              </p>
              <ul>
                <li>Agrega un segundo botón, <span class="ButtonText">BottomButton</span> y un segundo PhoneNumberPicker, para que tu aplicación ofrezca la opción de dos números.
                </li>
                <li>Añade una etiqueta con instrucciones sobre cómo utilizar la aplicación.
                </li>
                <li>Muestra el nombre de la persona a la que se llama además del número de teléfono. Utiliza otra etiqueta mas para mostrar la información adicional.
                </li>
              </ul>
              <h2>
                Usando PicCall
              </h2>
              <p>
                Puedes empaquetar <em>PicCall</em> y descargarlo en el teléfono para que puedas utilizarlo cuando no estés conectado a la computadora. Pero hay una gran limitación: Cada vez que se reinicia <em>PicCall</em>, comienza de nuevo y no recuerda lo que has elegido la última vez. Más adelante, veremos cómo utilizar el componente <span class="ButtonText">TinyDB</span> para crear aplicaciones que puedan recordar información de una vez a otra. Dicha información se le llama <i>datos persistentes</i>.
              </p>
              <h2>
                Revisión
              </h2>Estas son las ideas principales tratadas en este tutorial:
              <ul>
                <li>
                  <p>
                    Puedes nombrar a los componentes por medio del botón Rename.
                  </p>
                </li>
                <li>
                  <p>
                    App Inventor tiene componentes que pueden utilizar la información almacenada en el teléfono. <span class="ButtonText">PhoneNumberPicker</span> puede obtener números de teléfono y fotos de tus contactos, y <span class="ButtonText">PhoneCall</span> puede hacer llamadas.
                  </p>
                </li>
              </ul>
              <blockquote class="Dogfooding">
                <b>Atención:</b> En algunos sistemas Android, la lista que aparece al ejecutar el selector de número de teléfono no muestra las imágenes asociadas con sus contactos. A pesar de que la imagen no se muestra, la propiedad "imagen" seguirá devolviendo una imagen que se mostrará cuando se ejecute la aplicación, siempre que el teléfono tenga una imagen para ese contacto.
              </blockquote>
            </div>
          </div>
        </div>
        <div class="footer">
          <div class="footer-legal">
            <p>
              <a href="http://creativecommons.org/licenses/by/3.0/es/" rel="license"><img alt="Creative Commons License" class="c3" src="http://i.creativecommons.org/l/by/3.0/88x31.png"></a><br>
              Este trabajo está bajo una licencia <a href="http://creativecommons.org/licenses/by/3.0/es/" rel="license">Creative Commons Attribution 3.0 Unported License</a> .
            </p>
            <p>
              El trabajo original de Google ha sido modificado<br>
              El trabajo modificado fue traducido del Inglés al Español<br>
              <a href="../../../about/index.html">Acerca de</a> | <a href="../../../about/privacy.html">Privacidad</a> | <a href="../../../about/termsofservice.html">Condiciones</a>
            </p>
          </div>
          <div class="footer-lastupdate">
            <script type="text/javascript">
if (document.lastModified != '') {
                var m = "Page last updated: " + document.lastModified;
                var p = m.length-8;
                document.writeln("<center>");
                document.write(m.substring(p, 0));
                document.writeln("<\/center>");
              }
            </script>
          </div>
        </div>
      </div>
    </div>
  </body>
</html>

